<script lang="ts" setup>
import { computed } from 'vue'
import FileUploadPreview from '@/components/FileUploadPreview/index.vue'

interface Props {
	modelValue?: number | string | number[] // 支持单个值或数组
	placeholderSrc: string
	width: string
	height: string
	accept?: string
	maxSize?: number // 最大文件大小（MB）
	maxCount?: number // 最大上传数量
	isArray?: boolean // 是否为数组
	disabled?: boolean // 是否禁用
}

interface Emits {
	(e: 'update:modelValue', value: number | string | number[]): void
	(e: 'uploadSuccess', fileIds: number[]): void // 文件上传成功回调
	(e: 'fileUploaded', data: { fileId: number; file: File }[]): void // 文件上传成功，传递原始File对象
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: '',
	accept: '.jpg,.jpeg,.png',
	maxSize: 10,
	maxCount: 1,
	isArray: false,
	disabled: false
})

const emit = defineEmits<Emits>()

// 转换 modelValue 为 fileIds 数组
const fileIds = computed<number[]>(() => {
	// 根据 isArray prop或modelValue类型判断
	if (props.isArray || Array.isArray(props.modelValue)) {
		if (Array.isArray(props.modelValue)) {
			return props.modelValue.filter(id => typeof id === 'number' && id > 0)
		}
		return []
	}
	// 单值模式
	if (typeof props.modelValue === 'number' && props.modelValue > 0) {
		return [props.modelValue]
	}
	return []
})

// 处理文件变化
const handleFileChange = (fileIds: number[]): void => {
	if (props.isArray) {
		// 数组模式：返回数组，根据 maxCount 限制数量
		const limitedFileIds = props.maxCount ? fileIds.slice(0, props.maxCount) : fileIds
		emit('update:modelValue', limitedFileIds)
	} else {
		// 单个值模式：取第一个文件ID
		emit('update:modelValue', fileIds.length > 0 ? fileIds[0] : '')
	}

	// 触发上传成功回调
	if (fileIds.length > 0) {
		emit('uploadSuccess', fileIds)
	}
}

// 处理文件上传成功事件
const handleFileUploaded = (data: { fileId: number; file: File }[]) => {
	emit('fileUploaded', data)
}
</script>

<template>
	<FileUploadPreview
		:placeholder-src="placeholderSrc"
		:width="width"
		:height="height"
		:accept="accept"
		:max-size="maxSize"
		:disabled="disabled"
		:max-count="maxCount"
		:multiple="maxCount > 1"
		:file-ids="fileIds"
		@fileChange="handleFileChange"
		@fileUploaded="handleFileUploaded"
	/>
</template>
